
<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="90%" height="90%">
    <el-table v-loading="loading" :data="list">
      <el-table-column label="流程KEY" align="center" prop="key"  />
      <el-table-column label="流程名称" align="center" prop="name" min-width="200px" fixed="left" />
      <el-table-column label="版本号" align="center" prop="version"  />
      <el-table-column align="center" prop="suspensionState" label="状态"  min-width="50">
        <template  #default="scope">
          <el-tag type="success" v-if="scope.row.suspensionState==1">激活</el-tag>
          <el-tag type="danger" v-else>挂起</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="deploymentTime" label="部署时间" width="150"/>
      <el-table-column  align="center" prop="description" :show-overflow-tooltip="true" label="挂起或激活原因" width="150"/>
      <el-table-column label="操作" align="center" fixed="right" width="180">
        <template #default="scope">
          <el-button
            link
            type="primary"
            v-hasPermi="['bpm:process-instance:cancel']"
            @click="changeDefinition(scope.row)"
          >
            切换
          </el-button>
        </template>
      </el-table-column>
    </el-table>


    <template #footer>
      <!-- 分页 -->
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import {getHistList,migrationProcessDefinition} from '@/api/bpm/definition/index'
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
defineOptions({ name: 'ProcessInstanceHistList' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const crrentInstance = ref(null)//当前实例信息
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  id: '',
  key: undefined,
})
/** 打开弹窗 */
const open = async (row) => {
  dialogVisible.value = true
  crrentInstance.value=row;
  queryParams.id=row.processDefinitionId;
  queryParams.key=row.processDefinition.key;
  getList();
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗



/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await getHistList(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}



/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  emit('success')
}


/** 切换流程定义 */
const changeDefinition = async (row) => {
  await message.confirm(`是否确认切换?`)
  console.log(row)
  if(crrentInstance.value!= null){
   await  migrationProcessDefinition(row.id,crrentInstance.value.processDefinitionId);
  }
  message.success(t('切换成功'));
}


</script>









<style scoped lang="scss">

</style>
